---
import CopyCommandButton from "./copyCommandButton.tsx";
import Terminal from "@components/landing/terminal/terminal.astro";
import CliDemo from "./cliDemo.tsx";
---

<>
  <a
    target="_blank"
    href="https://nativewindui.com"
    class="cursor-pointer relative flex justify-center group"
  >
    <h1
      data-text="  NativewindUI is   here..."
      class="!absolute appear-disappear top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 left-1/2 glitch layers z-20 w-10/12 max-w-screen-lg text-center text-4xl font-bold tracking-tight text-white sm:text-6xl lg:text-[4rem] xl:text-[4rem] bg-clip-text bg-gradient-to-t from-zinc-400 to-33% to-white"
    >
      <span>
        <span
          class="bg-gradient-to-r from-indigo-300 via-pink-400 to-orange-200 bg-clip-text text-transparent drop-shadow-xl"
        >
          NativewindUI
        </span> is <br /> here...</span
      >
    </h1>
    <h1
      data-text="The most configurable way to create an Expo app"
      class="disappear-reappear glitch layers group-hover:invisible w-10/12 max-w-screen-lg text-center text-4xl font-bold tracking-tight text-transparent sm:text-6xl lg:text-[4rem] xl:text-[4rem] bg-clip-text bg-gradient-to-t from-zinc-400 to-33% to-white"
    >
      The most configurable way to create an{" "}
      <span
        class="bg-gradient-to-br from-yellow-500 to-orange-500 bg-clip-text text-transparent drop-shadow-xl"
      >
        Expo
      </span>{" "}
      app
    </h1>
  </a>
  <CopyCommandButton client:load />
  <Terminal />
  <CliDemo client:load />
</>
